<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="bannerCrud" :columns="bannerColumns" ref="bannerCrudRef">
      <template #img_path="{ record }">
        <a-image :src="record.img_path ? $tool.showFile(record.img_path):''" height="80" />
      </template>
      <!--           排序列-->
      <template #sort="{ record }">
        <a-input-number
            :default-value="record.sort"
            mode="button"
            @change="bannerChangeSort($event, record.id)"
            :min="0"
            :max="1000"
        />
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
            :checked-value="1"
            :unchecked-value="2"
            @change="bannerChangeStatus($event, record.id)"
            :default-checked="record.status == 1"
        />
      </template>
    </ma-crud>

  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import api from '@/api/prm/banner.js'
import jumpConf from '@/config/const.js'
import app from '@/config/app.js'
import { Message } from '@arco-design/web-vue'

const jumpTbColumn = jumpConf.jumpTbColumn
const banner_type = app.banner_type

//轮播图
const bannerCrudRef = ref()

//排序
const bannerChangeSort = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'sort' })
  if (response.success) {
    Message.success(response.message)
  }
}
//状态
const bannerChangeStatus = async (value, id) => {
  const response = await api.updateByField({ id, value,field:'status' })
  if (response.success) {
    Message.success(response.message)
  }
}
//表格
const bannerCrud = reactive({
  api: api.list,
  showIndex: false,
  pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  searchColNumber:3,
  add: {show: true, api: api.add, auth: ['mini:banner:save']},
  edit: {show: true, api: api.update, auth: ['mini:banner:update']},
  delete: {
    show: true,
    api: api.delete, auth: ['mini:banner:delete'],
  },
  formOption: {viewType: 'drawer', width: 800},
  beforeOpenAdd: () => {
    // bannerColumns[2].addDefaultValue = "n"
    return true
  },
})

const bannerColumns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {
    title: '图片', dataIndex: 'img_path', search: false, commonRules: [{required: true, message: '必须上传图片'}],
    width: 200, formType: 'upload',type:'image'
  },
  {
    title: '归属', dataIndex: 'type', formType: 'select', search: true, width: 80,
    dict: { data: banner_type, translation: true },
  },
  {
    title: '排序', dataIndex: 'sort', formType: 'input-number', addDefaultValue: 1, width: 180,
  },
  {
    title: '启用', dataIndex: 'status', search: false, formType: 'radio',
    dict: {name: 'data_status', props: {label: 'title', value: 'key'}},
    addDefaultValue: 1, width: 120
  },
  ...jumpTbColumn,
  {
    title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: false, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:banner'}
</script>

<style scoped>

</style>
